<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <category-selector @getCategoryAllId="getCategoryAllId"></category-selector>
    </el-card>
    <!--  展示属性列表的卡片-->
    <el-card v-show="isAddOrUpdateAttr">
      <el-button :disabled="currentCategory.category3Id === undefined || currentCategory.category3Id === ''"
                 class="el-icon-plus"
                 style="margin-bottom: 10px"
                 type="primary"
                 @click="addAttr"
      >
        添加属性
      </el-button>
      <!--      手机属性表格-->
      <el-table
        v-loading="loading"
        :data="attrList"
        border
        style="width: 100%">
        <!--        序号-->
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="80"
        >
        </el-table-column>
        <!--        属性名称-->
        <el-table-column
          label="属性名称"
          prop="attrName"
          width="150">
        </el-table-column>
        <!--        属性值列表-->
        <el-table-column
          label="属性值列表"
          prop="attrValueList">
          <template slot-scope="scope">
            <el-tag v-for="attrVal in scope.row.attrValueList"
                    :key="attrVal.id"
                    class="tagStyle"
                    size="mini"
                    type="success"
            >
              {{ attrVal.valueName }}
            </el-tag>
          </template>
        </el-table-column>
        <!--        修改或者删除属性-->
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <!--            修改-->
            <el-button
              icon="el-icon-edit" size="mini" type="warning"
              @click="updateAttr(scope.row)"
            >修改
            </el-button>
            <!--            删除-->
            <el-button icon="el-icon-delete"
                       size="mini"
                       type="danger"
                       @click="deleteAttr(scope.row)"
            >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--  添加或修改属性的卡片-->
    <el-card v-show="!isAddOrUpdateAttr">
      <el-form ref="addOrUpdateForm" :model="addOrUpdateDate" label-width="80px">
        <!--        添加属性名-->
        <el-form-item prop="attrName">
          <span class="attrName">属性名</span>
          <el-input v-model.trim="addOrUpdateDate.attrName" maxLength="8"
                    placeholder="请输入属性名" style="width: 20%" ref="addOrUpdateRef"></el-input>
        </el-form-item>
        <!--        添加属性值-->
        <el-form-item>
          <!--          添加属性按钮-->
          <el-button
            v-show="addAttrInputIsShow === 'addBtn'" :disabled="this.addOrUpdateDate.attrName === ''"
            class="el-icon-plus"
            type="primary"
            @click="addAttrValInput"
          >添加属性值
          </el-button>
          <!--          添加属性输入框-->
          <div v-show="addAttrInputIsShow === 'addInput'">
            <el-input v-model="temporaryValueName" placeholder="请输入要添加的属性值" ref="addInputRef" style="width: 20%;margin-right: 15px"></el-input>
            <el-button type="primary" @click="addAttrValue">确定</el-button>
            <el-button @click="cancelUpdateOrAddAttrVal">取消</el-button>
          </div>
          <!--          编辑属性输入框-->
          <div v-show="addAttrInputIsShow === 'editInput'">
            <el-input v-model="temporaryValueName" placeholder="请输入需要修改的属性值" ref="editInputRef" style="width: 20%;margin-right: 15px"></el-input>
            <el-button type="primary" @click="editAttrValue">确定</el-button>
            <el-button @click="cancelUpdateOrAddAttrVal">取消</el-button>
          </div>
        </el-form-item>
        <!--        属性值列表-->
        <el-form-item prop="attrValueList">
          <el-table
            :data="addOrUpdateDate.attrValueList"
            border
            style="width: 100%"
          >
            <el-table-column
              align="center"
              label="序号"
              type="index"
              width="80">
            </el-table-column>
            <el-table-column
              align="center"
              label="属性值名称"
              prop="valueName"
              width="580">
            </el-table-column>
            <!--            删除或修改当前的属性值-->
            <el-table-column align="center" label="操作">
              <template slot-scope="scope,$index">
                <el-button class="el-icon-edit" type="warning" @click="editAttrValInput(scope.row,scope.$index)"></el-button>
                <el-button class="el-icon-delete" type="danger" @click="deleteAttrVal(scope.$index)"></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <!--        保存修改属性和取消修改属性按钮-->
        <el-form-item>
          <el-button :disabled="this.addOrUpdateDate.attrName === ''" type="primary" @click="reqAddOrUpdateAttr">保存
          </el-button>
          <el-button @click="cancelUpdateOrAddAttr">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 引入深拷贝
import CloneDeep from 'lodash/cloneDeep'

export default {
  name: "Attr",
  data() {
    return {
      loading: false, // 控制loading加载效果的
      // 属性列表
      attrList: [],
      // 控制添加修改或者展示商品属性的flag, 展示: true, 修改: false
      isAddOrUpdateAttr: true,
      // 当前选中的属性的Id
      currentCategory: {},
      // 临时存放添加或者修改的数据，添加属性不用带Id
      addOrUpdateDate: {
        attrName: '',
        attrValueList: [
          // {
          //   attrId: '', // 相应属性名的Id
          //   valueName: '' // 属性值的名称
          // }
        ],
        categoryId: '', // 三级分类Id
        categoryLevel: 3,
        id: undefined
      },
      /*添加属性值输入框的显示或隐藏: addBtn添加属性按钮，
      addInput 添加属性输入框
      editInput修改属性编辑框*/
      addAttrInputIsShow: 'addBtn',
      // 临时存放属性值的区域
      temporaryValueName: '',
      // 临时存放当前编辑的那个属性值的索引值
      temporaryEditIndex: ''
    }
  },
  methods: {
    // 获取属性列表数据
    async getCategoryAllId(idObj) {
      this.currentCategory = idObj
      // 如果修改了一级或者二级的分类，置空之前分类的数据
      if (idObj.category2Id === '' || idObj.category3Id === '') {
        this.attrList = []
        this.resetAttrFormData()
        return
      }
      this.loading = true
      let res = await this.$API.attr.apiGetAttrs(idObj.category1Id, idObj.category2Id, idObj.category3Id)
      if (res.code === 200) {
        this.attrList = res.data
        this.loading=false
      } else {
        this.$message.error('获取属性失败')
        this.loading = false
      }
    },
    // 打开添加属性值AND属性值的卡片
    addAttr() {
      this.isAddOrUpdateAttr = false
      this.addOrUpdateDate.categoryId = this.currentCategory.category3Id
      // 修改属性名输入框自动聚焦
      this.$nextTick(()=>{
        this.$refs.addOrUpdateRef.focus()
      })
    },
    // 打开修改属性名AND属性值的卡片并传递值
    updateAttr(attrInfo) {
      // 打开卡片
      this.isAddOrUpdateAttr = false
      // 重置数据,利用了深拷贝
      this.addOrUpdateDate = CloneDeep(attrInfo)
      // 修改属性名输入框自动聚焦
      this.$nextTick(()=>{
        this.$refs.addOrUpdateRef.focus()
      })
    },
    // 删除属性名AND属性值， attrId
    deleteAttr({id: attrId}) {
      this.$confirm('此操作将永久删除该属性, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await this.$API.attr.apiDeleteAttr(attrId)
        if(res.code === 200) {
          this.getCategoryAllId(this.currentCategory)
          this.$message.success('删除成功')
        }
      }).catch(() => {
        this.$message.info('已取消删除')
      });
    },
    // 打开编辑属性值的框
    editAttrValInput(attrValInfo,index) {
      this.temporaryValueName = attrValInfo.valueName
      this.addAttrInputIsShow = 'editInput'
      // 将要编辑的选项在临时存放数组的索引
      this.temporaryEditIndex = index
      // 编辑输入框自动获取焦点
      this.$nextTick(()=>{
        this.$refs.editInputRef.focus()
      })
    },
    // 打开添加属性值的输入框
    addAttrValInput(){
      this.addAttrInputIsShow = 'addInput'
      // 添加输入框自动获取焦点
      this.$nextTick(()=>{
        this.$refs.addInputRef.focus()
      })
    },
    // 将临时存放的属性值 赋值给修改的属性值
    editAttrValue() {
      // 监测属性值数值中是否有重名
      let isLikeName = this.addOrUpdateDate.attrValueList.some(item => {
        return item.valueName === this.temporaryValueName
      })
      if (isLikeName) {
        // 如果存在直接退出
        this.$message.error('已存在该属性值')
      } else {
        // 根据索引值修改属性
        this.addOrUpdateDate.attrValueList[this.temporaryEditIndex].valueName = this.temporaryValueName
      }
      // 添加完成后置空临时存放属性区域
      this.temporaryValueName = ''
      // 关闭input框
      this.addAttrInputIsShow = 'addBtn'
    },
    // 将属性值添加到 临时存放添加或者修改的数据对象中
    addAttrValue() {
      // 监测属性值数值中是否有重名的属性
      let isLikeName = this.addOrUpdateDate.attrValueList.some(item => {
        return item.valueName === this.temporaryValueName
      })
      if (isLikeName) {
        // 如果存在直接退出
        this.$message.error('已存在该属性值')
      } else {
        // 如果是修改属性值【添加操作】
        if (this.addOrUpdateDate.attrName !== '') {
          let attrId = this.addOrUpdateDate.id
          this.addOrUpdateDate.attrValueList.push({attrId: attrId, valueName: this.temporaryValueName})
        } else {
          // 没有属性名【添加属性】
          this.addOrUpdateDate.attrValueList.push({attrId: undefined, valueName: this.temporaryValueName})
        }
      }
      // 添加完成后置空临时存放属性区域
      this.temporaryValueName = ''
      // 关闭input框
      this.addAttrInputIsShow = 'addBtn'
    },
    // 删除属性值
    deleteAttrVal(index) {
      // 将要删除临时存放数组的索引
      this.addOrUpdateDate.attrValueList.splice(index, 1) // 删除当前点击删除的对象
    },
    // 发送请求添加或者修改属性名AND属性值
    async reqAddOrUpdateAttr() {
      let res = await this.$API.attr.apiAddAttr(this.addOrUpdateDate)
      if (res.code === 200) {
        this.$message.success('修改成功')
        this.isAddOrUpdateAttr = true // 回到展示属性页
      } else {
        this.$message.error('添加失败')
      }
      await this.getCategoryAllId(this.currentCategory)
      // 展示属性列表展示页
      this.isAddOrUpdateAttr = true
      this.resetAttrFormData()
    },
    // 取消添加或者修改属性名AND属性值
    cancelUpdateOrAddAttr() {
      this.isAddOrUpdateAttr = true // 回到展示属性页
      this.resetAttrFormData()
    },
    // 取消添加属性值或者修改属性值操作
    cancelUpdateOrAddAttrVal() {
      this.addAttrInputIsShow = 'addBtn'
      this.temporaryValueName = ''
    },
    // 重置属性表单收集区数据
    resetAttrFormData() {
      // 重置收集到的数据
      this.addOrUpdateDate.id = undefined
      this.addOrUpdateDate.categoryLevel = undefined
      this.addOrUpdateDate.categoryId = ''
      this.$refs.addOrUpdateForm.resetFields()
    }
  },
  watch: {
    // 监视分类是否有被改变，一被改变就跳转回展示页面
    currentCategory: {
      deep: true,
      handler() {
        this.isAddOrUpdateAttr = true
      }
    }
  }
}
</script>

<style scoped>
.tagStyle {
  margin: 0 5px;
}

.attrName {
  font-size: 16px;
  font-weight: 700;
  margin-right: 10px;
}
</style>
